<template>
  <div>


    <myheader></myheader>

	<section class="featured-block text-center">
		<div class="container">
			
			<div>

                <Breadcrumb :datas='datas'></Breadcrumb>

            </div>

            <div>
                <table>

                    <tr>

                        <td>

                            用户名：

                        </td>
                        <td>

                            <input type="text" v-model='username' placeholder="请输入用户名">
                            
                        </td>

                    </tr>
                    
                    <tr>

                        <td>

                            密码：

                        </td>

                        <td>

                            <input type="text" v-model='password' placeholder="请输入密码">
                            
                        </td>

                    </tr>

                    <tr>

                        <td>

                            验证码：

                        </td>

                        <td>

                            <input type="text" v-model='code' placeholder="请输入验证码">
                            
                        </td>

                    </tr>

                    <tr>

                        <td>

                            

                        </td>

                        <td>

                            <img class='imgcode' alt='点击刷新' :src="code_src" @click="change_code" width='200px' height='100px'>
                            
                        </td>

                    </tr>

                    <tr>

                        <td>
                        </td>

                        <td>

                            <!-- 滑块验证码 -->
                            <drag-verify :width='width' :height='height' :text='text' ref='Verify'></drag-verify>
                            
                        </td>

                    </tr>


                    <tr>
                        <td></td>
                        <td> <Button color='blue' @click="submit">登陆</Button> 
                        
                            &nbsp;&nbsp;
                            <img @click="sina" class='imgcode' src="http://127.0.0.1:8000/static/sina.png" alt="">
                            <img @click="dingding" class='imgcode' src='http://localhost:8000/static/dingding.png'>
                         </td>

                    </tr>



                </table>
            </div>



		</div>
	</section>
	

	

	
    <myfooter></myfooter>    
		
		

    
  </div>
  
</template>


 
<script>

//导入组件
import myheader from './myheader'
import myfooter from './myfooter'
//导入滑块验证码
import dragVerify from 'vue-drag-verify'


export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明滑块验证码相关数据
      width:320,
      height:42,
      text:'请将滑块拖动到右边',
      //面包屑导航变量
      datas:[{title:'首页',route:{name:'index'}},{title:'登陆页面'}],
      
      username:'',
      password:'',
      phone:'',
      code:'',
      //验证码地址变量
      code_src:'http://127.0.0.1:8000/code/?'
    }
  },
  //注册组件标签
  components:{
      'myheader':myheader,
      'myfooter':myfooter,
      'drag-verify':dragVerify,
  },
  mounted:function(){

      //判断是否拖动

  
},
  methods:{

      //钉钉登陆
      dingding(){
          
          //组装url
          let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoaoqugakgcsnfqqp5e&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://127.0.0.1:8000/dingding_back/';

          //进行跳转
          window.location.href = url;
      },

      //新浪微博三方登陆
      sina(){

          //拼接url
          let client_id = 1313226958;

          let url = 'https://api.weibo.com/oauth2/authorize?client_id='+client_id + '&redirect_uri=http://127.0.0.1:8000/weibo/';

          //跳转
          window.location.href = url

      },

      //刷新验证码
      change_code(){
          //定义字符
          var str = Math.ceil(Math.random()*10)
          //将字符赋值
          this.code_src += str
      },

      //定义提交事件
      submit(){

          //判断是否拖动滑块验证
          if (this.$refs.Verify.isPassing == false){
              this.$Message('请拖动滑块')
              return false
          }

          //非空验证
          if(this.username == ''){

              this.$Message('您没有输入用户名')
              return false
          }


          //请求后台接口
          this.axios.get('http://localhost:8000/login',{params:{username:this.username,password:this.password,code:this.code}}).then(res=>{
              this.$Message(res.data.mes)
              console.log(res);


              
              //登陆成功之后将用户信息存入localStorage
              if (res.data.code==200){
                  localStorage.setItem('username',res.data.username)
                  localStorage.setItem('uid',res.data.uid)
                  localStorage.setItem("jwt",res.data.jwt);

                  this.$router.push('/');
              }





          })
      }
     
  }
}


</script>
 
<style>

td {
    padding: 10px;
}
.imgcode {
    cursor: pointer;
}

</style>